<template >
	<div class="contain-box">
		<div class="box-header">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>数据中心</el-breadcrumb-item>
				<el-breadcrumb-item>采购概况分析</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="box-set">
			<el-date-picker
					size="small"
					type="daterange"
					style="margin-right: 20px"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="截止日期">
			</el-date-picker>
			<div class="set-title" :class="isActive === 0 ? 'active' : ''" @click="isActive = 0">今日</div>
			<div class="set-title"  :class="isActive === 1 ? 'active' : ''" @click="isActive = 1">近7日</div>
			<div class="set-title"  :class="isActive === 2 ? 'active' : ''" @click="isActive = 2">近3个月</div>
			<div class="set-title"  :class="isActive === 3 ? 'active' : ''" @click="isActive = 3">近6个月</div>
		
		</div>
		
		<div class="box-nav">采购数据统计</div>
		<div class="box-table">
			<div class="table-box">
				<p class="font">采购金额（元）</p>
				<p class="font-box">45000.00</p>
			</div>
			<div class="table-box">
				<p class="font">采购笔数（笔）</p>
				<p class="font-box">1680</p>
			</div>
			<div class="table-box">
				<p class="font">采购量</p>
				<p class="font-box">223350.00</p>
			</div>
			<div class="table-box">
				<p class="font">采购退款金额 （元）</p>
				<p class="font-box">13000.00</p>
			</div>
			<div class="table-box">
				<p class="font">采购退款率（%）</p>
				<p class="font-box">13.25%</p>
			</div>
		</div>
		<div class="box-chat">
			<div class="chat-box" id="line"></div>
			<div class="chat-box" id="lineTwo"></div>
		</div>
		<div class="box-top">
			<div class="top-box">
				<div class="top-title">
					商品采购品类占比
				</div>
				<div class="top-body" id="pie"></div>
			</div>
			<div class="top-box">
				<div class="top-title">
					采购退货品类占比
				</div>
				<div class="top-body" id="pieTwo"></div>
			</div>
		</div>
		<div class="box-top">
			<div class="top-box">
				<div class="top-title">
					商品采购排行榜  (TOP5)
				</div>
				<div class="top-table">
					<el-table
							:data="tableData"
							style="width: 100%">
						<el-table-column
								prop="name"
								align="center"
								label="商品编码"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="商品名称"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="销售总额(元)"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="销售笔数"
						>
						</el-table-column>
					
					</el-table>
				</div>
			</div>
			<div class="top-box">
				<div class="top-title">
					采购退货排行榜  (TOP5)
				</div>
				<div class="top-table">
					<el-table
							:data="tableData"
							style="width: 100%">
						<el-table-column
								prop="name"
								align="center"
								label="商品编码"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="商品名称"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="销售总额(元)"
						>
						</el-table-column>
						<el-table-column
								prop="name"
								align="center"
								label="销售笔数"
						>
						</el-table-column>
					
					</el-table>
				</div>
			</div>
		</div>
		<div style="height: 20px"></div>
	</div>
</template >

<script >
    import * as echarts from "echarts";

    export default {
        data(){
            return{
                isActive:0,
                tableData:[
                    {
                        name:'王小虎'
                    },
                    {
                        name:'王小虎'
                    },
                    {
                        name:'王小虎'
                    },
                    {
                        name:'王小虎'
                    },
                    {
                        name:'王小虎'
                    },
                ]
            }
        },
        mounted() {
            this.getLine()
            this.getLineTwo()
            this.getPie()
            this.getPieTwo()
        },
        methods:{
            getLine(){
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: "(采购额)单位/万元",
                            data: [120, 200, 150, 80, 70, 110],
                            type: 'bar',
                            showBackground: true,
                            barWidth: 30,
                            backgroundStyle: {
                                color: 'rgba(255, 153, 0, 0.2)'
                            },
                            itemStyle:{
                                normal:{
                                    color:'#ff9900'
                                }
                            }
                        }
                    ]
                }
                const myChart = echarts.init(document.getElementById('line'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },
            getLineTwo(){
                const option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: ['一月', '二月', '三月', '四月', '五月', '六月']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: "(采购笔数)单位/笔",
                            data: [120, 200, 150, 80, 70, 110],
                            type: 'bar',
                            showBackground: true,
                            barWidth: 30,
                            backgroundStyle: {
                                color: 'rgba(41, 94, 213, 0.2)'
                            },
                            itemStyle:{
                                normal:{
                                    color:'#295ed5'
                                }
                            }
                        }
                    ]
                }
                const myChart = echarts.init(document.getElementById('lineTwo'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },
            getPie(){
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        right: 'right',
                        top:20,
                    },
                    series: [
                        {
                            name: '采购商品占比',
                            type: 'pie',
                            radius: [10, 100],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                { value: 40, name: '食品饮料' },
                                { value: 38, name: '粮油' },
                                { value: 32, name: '服装' },
                                { value: 30, name: '日常百货' },
                                { value: 28, name: '箱包' },
                                { value: 26, name: '电器' },
                            ]
                        }
                    ]
                };
                const myChart = echarts.init(document.getElementById('pie'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            },
            getPieTwo(){
                const option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        right: 'right',
                        top:20,

                    },
                    series: [
                        {
                            name: '采购退货占比',
                            type: 'pie',
                            radius: [10, 100],
                            center: ['50%', '50%'],
                            roseType: 'area',
                            itemStyle: {
                                borderRadius: 8
                            },
                            data: [
                                { value: 40, name: '食品饮料' },
                                { value: 38, name: '粮油' },
                                { value: 32, name: '服装' },
                                { value: 30, name: '日常百货' },
                                { value: 28, name: '箱包' },
                                { value: 26, name: '电器' },
                            ]
                        }
                    ]
                };
                const myChart = echarts.init(document.getElementById('pieTwo'))// 图标初始化
                myChart.setOption(option)// 渲染页面
                //  随着屏幕大小调节图表
                window.addEventListener('resize', () => {
                    myChart.resize()
                })
            }
        }
    }
</script >

<style scoped lang="less">
	.contain-box{
		width: 100%;
		height: 100%;
		.box-header{
			width: 100%;
			height: 50px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}
		.box-set{
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			.set-title{
				width: fit-content;
				padding: 5px 10px;
				border: 1px solid #ccc;
				color: #999;
				margin-right: 20px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.active{
				color: #1abc9c;
				border: 1px solid #1abc9c;
				
			}
		}
		.box-nav{
			margin-top: 20px;
			width: 100%;
			height: 40px;
			line-height: 40px;
			padding-left: 10px;
			box-sizing: border-box;
			font-size: 14px;
			color: #666;
			border-left: 5px solid #1abc9c;
			background-color: #f9f9f9;
		}
		.box-table{
			margin-top: 20px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;
			box-sizing: border-box;
			.table-box{
				width: 14%;
				max-height: 100px;
				padding: 20px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-around;
				background-color: rgba(240, 240, 240,0.5);
				border-radius: 5px;
				.font-box{
					color: #1abc9c;
					font-size: 20px;
					font-weight: bold;
				}
				.font{
					margin-bottom: 20px;
					color: #666;
					font-size: 14px;
				}
			}
		}
		.box-chat{
			margin-top: 20px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.chat-box{
				width: 49%;
				height: 400px;
				background-color: rgba(26, 188, 168,0.1);
			}
		}
		.box-top{
			margin-top: 20px;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.top-box{
				width: 49%;
				border: 1px solid rgba(240, 240, 240,1);
				border-top: none;
				.top-title{
					width: 100%;
					height: 40px;
					line-height: 40px;
					padding-left: 10px;
					box-sizing: border-box;
					font-size: 14px;
					color: #666;
					border-left: 5px solid #1abc9c;
					background-color: #f9f9f9;
				}
				.top-body{
					width: 100%;
					height: 300px;
					max-height: 300px;
				}
				.top-table{
					width: 100%;
				}
			}
		}
		.box-title{
			width: 100%;
			margin: 20px 0;
			padding: 10px 20px;
			border-radius: 5px;
			box-sizing: border-box;
			display: flex;
			p{
				margin-right: 20px;
			}
			background-color: rgba(26, 188, 156,0.2);
			color: #666;
			font-size: 14px;
		}
		.box-form{
			width: 100%;
			height: calc(100% - 150px);
			.form-header{
				width: 100%;
			}
			.form-table{
				margin-top: 20px;
				width: 100%;
			}
			.form-page{
				margin-top: 50px;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				/deep/.el-pager .active{
					background-color: #1abc9c;
				}
			}
		}
	}
</style >
